<template>
	<view>
		<!-- 页首 -->
		<zw-header-ai></zw-header-ai>
		<view class="menu-wrapper">
			<view class="wrap">
				<!-- 左侧菜单 -->
				<view class="menu-wrap" style="width: 280rpx;">
					<view class="fui-col__item fui-color__black " @click="setComd(1)">
						<image src="/static/image/ai/tp.png"></image>
						<view class="text">
							款式融合
						</view>
					</view>
					<view class="fui-col__item fui-color__black" @click="setComd(2)">
						<image src="/static/image/ai/wz.png"></image>
						<view class="text">文字创款</view>
					</view>
					<view class="fui-col__item fui-color__black active">
						<image src="/static/image/ai/wz.png"></image>
						<view class="text">指令解析</view>
					</view>
					<view
						style="position: absolute;bottom: 0;width: 280rpx;border-top: 1px solid #D8D8D8;padding-top: 40rpx;">
						<view class="fui-col__item fui-color__black">
							<image src="/static/image/ai/wd.png"></image>
							<view class="text">使用教程</view>
						</view>
						<view class="fui-col__item fui-color__black">
							<image src="/static/image/ai/wx.png"></image>
							<view class="text">交流社群</view>
						</view>
						<view class="fui-col__item fui-color__black">
							<image src="/static/image/ai/kf.png"></image>
							<view class="text">联系我们</view>
						</view>
					</view>
				</view>
				<!-- 中间内容 -->
				<view class="main-wrap">
					<view class="tool" style="">
						<image src="/static/image/ai/share.png"></image>
						<image src="/static/image/ai/xz.png"></image>
						<image src="/static/image/ai/del.png"></image>
						<image src="/static/image/ai/fb.png"></image>
						<image src="/static/image/ai/ch.png"></image>
					</view>
					<view
						style="border: 1px solid rgb(216, 216, 216);overflow: hidden;width: 100%;height: 100%;background-color: #F3F3F3;display: flex;justify-content: center;align-items: center;">
						<view class="card" style="border: 2px solid #0033FF;">
							<fui-upload-describe v-if="!attachment[0]"
								style="display: flex;justify-content: space-between;align-items: center;width: 100%;height:100%;"
								immediate :url="uploadUrl" radius="24" background="#fff" max="1" width="100%"
								height="100%" :showLoading="showLoading" ref="upload" @success="success" @error="error"
								@complete="complete">
								<view
									style="display: flex;justify-content: center;align-items: center;margin: 0 auto;width: 100%;height: 100%;">
									<view style="display: flex;justify-content: center;align-items: center;">
										<view>
											<image src="/static/image/ai/img.png"
												style="width: 150rpx;height: 150rpx;margin: 0 auto;display: flex;margin-bottom: 100rpx;">
											</image>
											<view
												style="color: #0033FF;font-size: 14px;font-weight: 350;text-align: center;text-align: center;">
												<view>指令解析可以还原图片的画面指令，</view>
												<view>帮助你生成一张和上传图片相似的创作</view>
											</view>
										</view>
									</view>

								</view>
							</fui-upload-describe>
						</view>
						<view
							style="position: absolute;bottom: 0px;width: 50%;text-align: center;padding: 20rpx;background-color: #fff;border-radius: 12px;"
							@click="createJob">
							<view class="button">立即解析</view>
						</view>
					</view>
				</view>
				<view class="menu-wrap" style="width: 800rpx;">
					<view
						style="height: 90rpx;border-left: 1px solid rgb(216, 216, 216);display: flex;justify-content: center;align-items: center;">
						<view
							style="border-radius: 7px;background: #E4E4E4;display: flex;justify-content: center;align-items: center;height: 70rpx;width: 95%;padding: 10rpx 20rpx 10rpx 20rpx;">
							<view :class="tabRight==1?'menu-button_active':'menu-button'" @click="setRight(1)">画面描述
							</view>
							<view :class="tabRight==2?'menu-button_active':'menu-button'" @click="setRight(2)">历史记录
							</view>
						</view>
					</view>
					<view v-show="tabRight==1">
						<view class="card" style="border-bottom: 0px solid #D8D8D8;">
							<view class="title" style="display: flex;">
								<view style="width: 80%;"></view>
								<view
									style="background: #D8D8D8;display: flex;justify-content: flex-start;align-items: center;width:10%;">

									<view
										style="background: #D8D8D8;color: #000;font-size: 16px;font-weight: 500;padding: 10rpx 20rpx 10rpx 20rpx;border-radius: 5px;">
										中
									</view>
									<view
										style="background: #0033FF;color: #fff;font-size: 16px;font-weight: 500;padding: 10rpx 20rpx 10rpx 20rpx;border-radius: 5px;">
										英
									</view>
								</view>
							</view>
							<view v-for="(item,index) in message">
								<view
									style="display: flex;justify-content: flex-start;align-items: top;margin-top: 40rpx;background-color: #fff;">
									<fui-badge background="#D0D0D0;" color="#3d3d3d" marginRight="20"
										:value="index+1"></fui-badge>
									<fui-textarea :radius="24" maxlength="1000" textareaBorder border-color="#0033FF"
										background-color="#fff" :value="item" isCounter>
										<view slot="right-bottom"
											style="display: flex;justify-content: flex-end;align-items: center;">
											<view style="display: flex;justify-content: center;align-items: center;"
												@click="copyText(item)">
												<view style="font-size: 12px;font-weight: 500;padding-right: 5rpx;">复制
												</view>
												<image src="/static/image/ai/copy.png" style="width: 25rpx;"
													mode="widthFix"></image>
											</view>
											<view style="margin-left: 10rpx;">|</view>
											<view @click="goText(item)"
												:style="item?'background: linear-gradient(90deg, #0033FF 0%, rgba(0, 51, 255, 0.9786) 0%, rgba(110, 24, 255, 0.9899) 43%, #D000FF 83%);':'background:#D0D0D0;'"
												style="padding: 8rpx 20rpx 8rpx 20rpx; margin-left: 10rpx;border-radius: 10px;color: #FFFFFF;font-size: 12px;font-weight: 500;">
												前往生成</view>
										</view>
									</fui-textarea>
								</view>
							</view>
						</view>
					</view>
					<view v-show="tabRight==2">
						<view class="cc">
							<view class="text">云空间</view>
							<view class="text" style="font-weight: normal;margin-left: 30rpx;">0.16GB / 10GB</view>
						</view>
						<scroll-view :scroll-y="true" @scrolltolower="getList"
							style="width: 800rpx;overflow-y: scroll;height: 100%;" class="container"
							:style="'height:'+(screenHeight-40)+'px'">
							<liu-waterfall-ai v-if="list.length > 0" :dataList="list" :column="columns"
								@click="click"></liu-waterfall-ai>
						</scroll-view>
					</view>

				</view>
			</view>
		</view>
		<!-- <zw-footer></zw-footer> -->
		<fui-landscape :show="show" :closable="closable" :position="position" @close="closePopup">
			<view class="fui-ani__box">

				<view class="fui-flex--center">
					<view>
						<image class="fui-hd__img" src="/static/image/ai/jg.png" mode="widthFix"></image>
						<text class="fui-ani__title" style="margin-left: 15rpx;">系统升级中
						</text>
					</view>
					<text class="fui-ani__title">暂无法提交任务</text>
					<text class="fui-desc">预计：2023-12-25 00:00 恢复</text>
				</view>
			</view>
		</fui-landscape>
	</view>
</template>

<script>
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';
	import centerConfig from '@/common/config/user/center.config.js';

	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			menuWrapper
		},
		data() {
			return {
				...centerConfig,
				accountInfo: {},
				width: 300,
				height: 300,
				counts: [],
				tabIndex: 1,
				screenHeight: 1000,
				type: 1,
				percent: 0,
				columns: 3,
				list: [],
				tabRight: 1,
				jobIdList: [],
				loading: false,
				page: 0,
				show: false,
				position: 2,
				closable: true,
				uploadUrl: '',
				attachment: [],
				status: '',

				enableUpdate: true,
				productMode: 1,
				highFun: false,
				highFun1: false,
				weight1: 1,
				weight2: 1,
				weight3: 1,
				styleNum: 1,
				pg: 10,
				badContent: "",
				seed: "",
				sizeTab1Index: 1,
				sizeTab2Index: 1,
				styleIndex: 1,
				moduleIndex: 4,
				goodContent: "",
				imageList: [],
				isActive: true,
				bigSizeCoin: 0,
				totalCoin: 0,
				labelTabIndex: 0,
				havePermissionTime: 0,
				usePermissionTime: 0,
				haveTryTime: 0,
				fastCoin: 0,
				tryTime: 0,
				styleArray: [],
				imageStyles: {
					width: 118,
					height: 82,
					border: {
						color: "#F0F0F0",
						width: 2,
						style: 'solid',
						radius: '14px'
					}
				},
				finishImg: [],
				showDialog: false,
				dialogTitle: "",
				timer: null,
				id: 0,
				returnData: [],
				tabw: -1,
				tabs: -1,
				message: ['', '', '', ''],
				showLoading: false,
			}
		},
		computed: {
			...mapState(['loginUser']),
			currentTime() {
				const currentHour = new Date().getHours();
				const timeQuantums = ['凌晨', '上午', '下午', '晚上'];
				return timeQuantums[Math.floor(currentHour / 6)];
			}
		},
		onLoad() {
			this.uploadUrl = getApp().globalData.apiUrl1 + "/api/v1/file/upload";
			this.getAccountInfo();
			this.findCounts();
			this.load()
			this.$store.commit('tab', 0);
			this.screenHeight = uni.getSystemInfoSync().screenHeight - 250;
		},
		methods: {
			// 获取裁剪的图片
			clipImageAfter (data) {
			    this.isClip = true;
			    this.resultImage = data;
				console.log(data)
			    this.image = '';
			    this.clearImage();
			},
			// 清空画布
			clearImage () {
			    this.$refs.clipCanvas.clearCanavas();
			},
			// 确定
			confirm () {
			    this.$refs.clipCanvas.polygon();
			},
			goText(text){
				if(text!=''){
					uni.navigateTo({
						url:'/pages/workbench/text/text?text='+text
					})
				}
			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('success');
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				});
			},
			load() {
				if (this.id > 0) {
					const that = this;
					that.timer = setInterval(function() {
						console.log(that.percent)
						that.percent++;
						if (that.percent > 98) {
							that.percent = 99;
							if (that.timer != undefined) {
								clearInterval(that.timer)
								that.timer = null;
							}
						}
					}, 4000);
					setTimeout(function() {
						that.queryData();
					}, 10);
				}
			},
			queryData() {
				const that = this;
				this.$util.request("/api/v1/job/" + this.id, {}, (res) => {
					console.log('返回正确回调', res)
					var array = res.data.finalResultImages;
					if (array == undefined || array.length == 0) {
						setTimeout(function() {
							that.queryData()
						}, 10000);
					} else {
						that.plateUserId = res.data.plateUserId
						that.returnData = res.data;
						let msg = JSON.parse(that.returnData.dataResult).task_result.message.replace('1️⃣', '')
							.replace('2️⃣', '').replace('3️⃣', '').replace('4️⃣', '');
						that.message = msg.split("\n\n");
						that.showLoading = false;
						if (that.timer != undefined) {
							clearInterval(that.timer)
							that.timer = null;
						}
					}
				}, true);
			},
			requstCategoryData() {
				const that = this;
				const url = getApp().globalData.apiUrl + "/api/v1/category/all";
				this.$util.request('/api/v1/category/all', {}, (res) => {
					this.accountInfo = res.accountInfo;
				}, true);
			},
			modeChange(num) {
				this.productMode = num
			},
			size1Change(num) {
				this.sizeTab1Index = num;
			},
			styleChange(num) {
				this.styleIndex = num;
			},
			moduleChange(num) {
				this.moduleIndex = num;
			},
			createJob() {
				if (!this.attachment) {
					this.enableUpdate = true;
					uni.showToast({
						title: "内容不能为空"
					})
					return
				}
				if (this.attachment.length < 1) {
					this.enableUpdate = true;
					uni.showToast({
						title: "最少上传一张图"
					})
					return
				}
				uni.showLoading({
					title: "上传资料中..."
				})
				this.showLoading = true;
				var cmd = this.goodContent;
				const that = this
				var pictureWeight = "";
				if (that.imageList.length == 2) {
					var value1 = 0.5 + ((1.5) / 100 * that.weight1)
					var value2 = 0.5 + ((1.5) / 100 * that.weight2)
					pictureWeight = "--iw " + value1 + " --iw " + value2;
				}
				if (that.imageList.length == 3) {
					var value1 = 0.5 + ((1.5) / 100 * that.weight1)
					var value2 = 0.5 + ((1.5) / 100 * that.weight2)
					var value3 = 0.5 + ((1.5) / 100 * that.weight3)
					pictureWeight = "--iw " + value1 + " --iw " + value2 + " --iw " + value3;
				}
				this.$util.request('/api/v1/job', {
					style: that.styleIndex,
					module: that.moduleIndex,
					width2height: that.sizeTab1Index,
					pictureWeight: pictureWeight,
					cmd: cmd,
					taskType: 5,
					badContent: that.badContent,
					state: 0,
					type: that.productMode,
					attachment: this.attachment.join(" "),
					style: that.styleIndex,
					productMode: that.productMode,

				}, (res) => {
					that.enableUpdate = true;
					uni.hideLoading()
					console.log('返回正确回调', res)
					var size = "1:1";
					var sizeArray = [
						"1:1",
						"1:1",
						"1:2",
						"4:3",
						"3:4",
						"16:9",
						"9:16"
					]
					that.id = res.data.id;
					size = sizeArray[that.sizeTab1Index]
					var module = "精彩"
					var moduleArray = [
						"1:1",
						"1:1",
						"1:2",
						"1:2",
						"精彩",
						"细腻",
						"动漫",
						"创意",
						"照片"
					]
					module = moduleArray[that.moduleIndex]
					var style = "长焦镜头"
					var styleArray = [
						"长焦镜头",
						"长焦镜头",
						"手绘背景",
						"CG数字渲染",
						"哑光颜",
						"X光片",
						"矢量设计海报",
						"极简线条画",
						"炭笔画",
						"更多"
					]
					style = styleArray[that.styleIndex]
					that.badContent = '';
					that.goodContent = ''
					that.imageList = [];
					that.finishImg = [];
					that.load();
				}, false);
			},
			//上传成功时触发
			success(e) {
				console.log(e)
				//e.res 为服务器返回数据
				//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				this.status = e.status
				console.log(res.data)
				if (res.data) {
					//处理结果返回给组件 
					//res.data.url为上传成功后返回的图片地址
					//e.index为图片索引值
					this.$refs.upload.result(res.data, e.index)
				}
			},
			//上传失败时触发
			error(e) {
				this.status = e.status
			},
			//选择图片或上传完成时触发
			complete(e) {
				this.attachment = e.urls
				if (this.status === 'success') {
					console.log(this.attachment)
					this.imageList = [];
					this.id = 0;
				}
			},
			closePopup() {
				this.show = false
			},
			click() {

			},
			setRight(index) {
				this.tabRight = index;
				if (this.tabRight == 2) {
					this.getList();
				}
			},
			setComd(index) {
				this.type = index
				if (index == 2) {
					uni.navigateTo({
						url: '/pages/workbench/text/text',
						fail(err) {
							console.log(err)
						}
					})
				}
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/workbench/ai/ai',
						fail(err) {
							console.log(err)
						}
					})
				}
			},
			goUrl(url) {
				uni.navigateTo({
					url: url,
					fail(err) {
						console.log(err)
					}
				})
			},
			getAccountInfo() {
				this.$util.request('/security/getAccountInfo', {}, (res) => {
					this.accountInfo = res.accountInfo;
				}, true);
			},
			getList() {
				let that = this;
				this.$util.request('/api/v1/notice/mine', {
					page: this.page,
					size: 40,
					type: 2
				}, (res) => {
					that.page = that.page + 1;
					that.loading = false;
					var list = res.data
					var tempList = [];
					for (var index = 0; index < list.length; index++) {
						var item = list[index];
						console.log(item)
						var key = "key_" + item.jobId;
						if (that.jobIdList.indexOf(key) > 0) {
							continue
						}
						that.jobIdList.push(key)
						tempList.push(item.job);

					}
					that.list = that.list.concat(tempList)
					console.log(that.list)
				}, true);
			},
			findCounts() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.$util.request('/profile/counts', {}, (res) => {
					uni.hideLoading();
					this.counts = res;
				}, true);
			}
		}
	}
</script>

<style lang="scss">
	.loadingContent {
		border-radius: 14rpx;
		background: rgba(250, 250, 250, 0.3);
		width: 720rpx;
		height: 720rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.progress-bg {
		width: 142.92px;
		height: 6.8px;
		border-radius: 20px;
		background: #D8D8D8;
	}

	.progress-content {
		height: 6.8px;
		border-radius: 20px;
		opacity: 1;
		background: #D000FF;
	}

	.fui-ani__title {
		font-family: 思源黑体;
		font-size: 18px;
		font-weight: 500;
		line-height: 40px;
		text-align: center;
		letter-spacing: 0px;

		font-feature-settings: "kern" on;
		color: #D8D8D8;
	}

	.fui-desc {
		margin-top: 60rpx;
		font-family: Source Han Sans;
		font-size: 14px;
		font-weight: normal;
		line-height: 40px;
		text-align: center;
		font-feature-settings: "kern" on;
		color: #D8D8D8;
	}

	.fui-flex--center {
		display: flex;
		margin: 40rpx 60rpx 40rpx 60rpx;
		align-items: center;
		flex-direction: column;
	}

	.fui-ani__box {
		width: 640rpx;
		border-radius: 24rpx;
		padding-bottom: 64rpx;

		border-radius: 19px;

		background: #000000;
	}

	.fui-hd__img {
		width: 40rpx;
		height: 42rpx;
	}

	.cc {
		// width: 100%;
		height: 40rpx;
		border-radius: 6px;
		background: linear-gradient(90deg, #000000 3%, #D6D6D6 100%, rgba(216, 216, 216, 0) 100%);
		margin: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 5rpx 0 5rpx 30rpx;

		.text {
			font-family: 思源黑体;
			font-size: 14px;
			font-weight: bold;
			line-height: 20px;
			letter-spacing: 0px;
			font-feature-settings: "kern" on;
			color: #FFFFFF;
		}
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.menu-wrapper {
		// padding-bottom: 40px;
		height: $page-height;
		background-color: #fff;

		.wrap {
			height: 100%;
			width: 100%;
			margin: 0 auto;
			display: flex;
			background-color: #fff;

			.menu-wrap {
				width: 234px;
				// padding: 36px 0;
				background-color: $bg-color;

				.title {
					font-family: 思源黑体;
					font-size: 14px;
					font-weight: 900;
					line-height: 20px;
					letter-spacing: 0px;
					color: #000000;
				}

				.card {
					border-bottom: 1px solid #D8D8D8;
					margin: 30rpx;


					.model {
						padding: 24rpx 24rpx 10rpx 24rpx;
						border-radius: 10px;
						width: 25%;
						display: flex;
						flex-direction: column;
						justify-items: center;
						align-items: center;

						background: linear-gradient(114deg, rgba(254, 130, 219, 0.2) 7%, rgba(104, 228, 255, 0.2) 103%), rgba(241, 241, 241, 0.1);

						.text {
							font-family: OPPOSans;
							font-size: 12px;
							font-weight: 500;
							line-height: 40rpx;
							text-align: center;
							letter-spacing: 0px;

							color: #0026BC;
						}

						box-sizing: border-box;
						border: 1px solid;
						border-image: linear-gradient(90deg, rgba(253, 132, 220, 0.5) 3%, rgba(127, 214, 250, 0.5) 100%) 1;

						backdrop-filter: blur(3px);
						box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4);
					}

					.model-active {
						padding: 24rpx 24rpx 10rpx 24rpx;
						border-radius: 10px;
						width: 25%;
						display: flex;
						flex-direction: column;
						justify-items: center;
						align-items: center;
						background: linear-gradient(114deg, rgba(203, 30, 155, 0.6) 7%, rgba(7, 154, 187, 0.6) 103%), rgba(241, 241, 241, 0.1);

						box-sizing: border-box;
						border: 2px solid #0033FF;

						.text {
							font-family: OPPOSans;
							font-size: 12px;
							font-weight: 500;
							line-height: 40rpx;
							text-align: center;
							letter-spacing: 0px;

							color: #FFFFFF;
						}

						backdrop-filter: blur(3px);
						box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4);
					}

					.sc-active {
						padding: 30rpx;
						border-radius: 10px;
						background: linear-gradient(96deg, rgba(203, 30, 155, 0.6) 4%, rgba(7, 154, 187, 0.6) 104%), rgba(241, 241, 241, 0.1);
						box-sizing: border-box;
						border: 2px solid #0033FF;
						backdrop-filter: blur(3px);
						box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4);
						font-family: OPPOSans;
						font-size: 14px;
						font-weight: 500;
						line-height: 20px;
						letter-spacing: 0px;
						color: #FFFFFF;
					}

					.sc {
						padding: 30rpx;
						background: linear-gradient(96deg, rgba(254, 130, 219, 0.2) 4%, rgba(104, 228, 255, 0.2) 104%), rgba(241, 241, 241, 0.1);
						border-radius: 10px;
						box-sizing: border-box;
						border: 1px solid;
						border-image: linear-gradient(90deg, rgba(253, 132, 220, 0.5) 3%, rgba(127, 214, 250, 0.5) 100%);
						font-family: OPPOSans;
						font-size: 14px;
						font-weight: 500;
						line-height: 20px;
						text-align: right;
						letter-spacing: 0px;
						color: #0026BC;
						backdrop-filter: blur(3px);
						box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4);

						.button {
							margin-left: 15rpx;
							font-family: 思源黑体;
							font-size: 16px;
							font-weight: 700;
							line-height: 20px;
							text-align: center;
							letter-spacing: 0px;
							color: #0033FF;
						}
					}


				}

				.menu-button_active {
					width: 50%;
					background: linear-gradient(97deg, rgba(203, 30, 155, 0.6) 4%, rgba(7, 154, 187, 0.6) 104%), rgba(241, 241, 241, 0.1);
					border-radius: 8px;
					box-sizing: border-box;
					border: 2px solid #0033FF;
					backdrop-filter: blur(3px);
					font-family: 思源黑体;
					font-size: 14px;
					font-weight: normal;
					line-height: 60rpx;
					text-align: center;
					letter-spacing: 0em;
					color: #FFFFFF;
				}

				.menu-button {
					width: 50%;
					background: #E4E4E4;
					border-radius: 8px;
					font-family: 思源黑体;
					font-size: 14px;
					font-weight: normal;
					line-height: 15px;
					text-align: center;
					letter-spacing: 0em;
					color: #000000;
				}

				.menu-group {
					margin: 0 48px 12px;

					.title {
						font-size: 16px;
						font-weight: 400;
						line-height: 52px;
						color: #333;
					}

					.menu-list {

						.menu {
							padding: 6px 0;
							color: #757575;
							cursor: pointer;

							&:hover {
								color: $text-color;
							}

							&.active {
								color: $color-primary;
							}
						}
					}
				}
			}

			.main-wrap {
				flex: 1;
				height: 100%;
				background-color: $bg-color;

				.card {
					margin: 20rpx;
					width: 600rpx;
					height: 600rpx;
					border-radius: 12px;
					opacity: 1;
					background: #FFFFFF;

					box-sizing: border-box;
					border: 5rpx dashed #C1C1C1;

					.sd {
						width: 120rpx;
						height: 60rpx;
						background: #4E5058;
						border-radius: 6px;
						color: #FFFFFF;
						font-weight: 500;
						font-size: 36rpx;
						text-align: center;
						align-items: center;
						line-height: 60rpx;
						// padding: 12rpx 30rpx 12rpx 30rpx;
						margin-left: 30rpx;
					}

					.sd-active {
						width: 120rpx;
						height: 60rpx;
						background: linear-gradient(90deg, #0033FF 0%, rgba(0, 51, 255, 0.9786) 0%, rgba(110, 24, 255, 0.9899) 43%, #D000FF 83%);
						border-radius: 6px;
						color: #FFFFFF;
						font-weight: 500;
						font-size: 36rpx;
						text-align: center;
						align-items: center;
						line-height: 60rpx;
						margin-left: 30rpx;
					}


				}

				.button {
					border-radius: 12px;
					background: linear-gradient(90deg, #0033FF 0%, rgba(0, 51, 255, 0.9786) 0%, rgba(110, 24, 255, 0.9899) 43%, #D000FF 83%);
					font-family: 思源黑体;
					font-size: 18px;
					font-weight: bold;
					line-height: 20px;
					letter-spacing: 0px;
					color: #FFFFFF;
					border-radius: 12px;
					text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.302);
					// border: 10px solid #FFFFFF;
					padding: 40rpx;
				}

				// padding: 36px 48px;
				.tool {
					height: 90rpx;
					border-left: 1px solid rgb(216, 216, 216);
					border-right: 1px solid rgb(216, 216, 216);
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					padding-left: 30rpx;
					padding-right: 30rpx;
				}
			}
		}
	}

	.fui-col__item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;

		.text {
			margin-left: 20rpx;
			font-family: 思源黑体;
			font-size: 16px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0em;
			color: #000000;
		}

		image {
			width: 20px;
			height: 20px;
		}
	}

	.active {
		background: linear-gradient(101deg, rgba(254, 130, 219, 0.2) 4%, rgba(104, 228, 255, 0.2) 103%), rgba(241, 241, 241, 0.1);
		box-sizing: border-box;
		border: 1px solid;
		border-image: linear-gradient(90deg, rgba(253, 132, 220, 0.5) 3%, rgba(127, 214, 250, 0.5) 100%) 1;
		backdrop-filter: blur(3px);
		box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4);
		border-right: 4px solid #0033FF;
	}
</style>